{% extends "./base.html" %}
{% block title %}
<title>考勤提交</title>
{% endblock %}
{% block style %}
<link rel="stylesheet" href="/static/assets/css/home.css">
{% endblock %}
{% block content %}
<div class="head">
  考勤提交（{{d}}）
</div>
<div class="title">
  请如实填写以下信息，如有疑问，请联系交付人员
</div>
<div class="user-info">
  <div class="ttx">个人信222息</div>
  <div class="input">
    <div class="ttx">姓名</div>
    <div class="input">
      <el-input value="{{name}}" readonly placeholder="请输入姓名"></el-input>
    </div>
  </div>
  <div class="input">
    <div class="ttx">手机号</div>
    <div class="input">
      <el-input value="{{mobile}}" readonly placeholder="请输入手机号"></el-input>
    </div>
  </div>
  <div class="input">
    <div class="ttx">本月应出勤</div>
    <div class="input">
      <el-input value="{{day}}" readonly placeholder="请输入应出勤">
        <template slot="append">天</template>
      </el-input>
    </div>
  </div>
  <div class="ttx">本月实际出勤</div>
  <div class="input">
    <el-input v-model="form.day" readonly placeholder="请输入实际出勤">
      <template slot="append">天</template>
    </el-input>
  </div>
  <div class="ttx">
    年假
    <span class="addRow" @click="addItem('nj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.nj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <!-- <el-input v-model="item.t" type="number" class="times" placeholder="请输入时长" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"> -->
      <el-input v-model="item.t" type="number" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('nj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">事假
    <span class="addRow" @click="addItem('sj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.sj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('sj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    病假
    <span class="addRow" @click="addItem('bj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.bj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('bj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    婚假
    <span class="addRow" @click="addItem('hj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.hj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('hj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    产假
    <span class="addRow" @click="addItem('cj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.cj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('cj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    产检假
    <span class="addRow" @click="addItem('cjj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.cjj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('cjj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    育儿假
    <span class="addRow" @click="addItem('yerj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.yerj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('yerj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    丧假
    <span class="addRow" @click="addItem('sangj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.sangj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('sangj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <div class="ttx">
    调休
    <span class="addRow" @click="addItem('tj')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.tj" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入时长">
        <template slot="append">小时</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('tj', i)" size="small" type="primary">删除</el-button>
    </div>
  </div>
  <!-- <div class="ttx">
    加班餐补/打车费
    <span class="addRow" @click="addItem('fei')"><i class="el-icon-circle-plus"></i></span>
  </div>
  <div class="wrap">
    <div v-for="(item, i) in items.fei" :key="i">
      <el-date-picker
        v-model="item.d"
        type="date"
        style="width:100%"
        placeholder="选择日期">
      </el-date-picker>
      <el-input v-model="item.t" class="times" placeholder="请输入费用">
        <template slot="append">元</template>
      </el-input>
      <el-input v-model="item.r" placeholder="请输入事由"></el-input>
      <el-button icon="el-icon-delete" style="margin-top:10px" @click="delItem('fei', i)" size="small" type="primary">删除</el-button>
    </div>
  </div> -->
  <div class="ttx">备注</div>
  <div class="input">
    <el-input type="textarea" placeholder="请输入具体情况" v-model="remark" maxlength="100" rows="6" show-word-limit>
    </el-input>
  </div>
</div>

<!-- <div class="liuyan" style="margin-bottom: 0;">
  <div class="ttx">请描述问题具体情况</div>
</div>
<div class="content">
  <el-input type="textarea" placeholder="请输入具体情况" v-model="form.content" maxlength="100" rows="6" show-word-limit>
  </el-input>
</div> -->
<div class="yanzheng">
  <div>
    <div style="width: 160px; font-size: 1.7rem;">手机验证码：</div>
    <div class="yzm">
      <el-input type="text" placeholder="请输入验证码" v-model="form.smscode">
    </div>
  </div>
  <el-button @click="sendSms" id="codeBtn">发送</el-button>
</div>
<!-- <div class="chengnuo">
  <el-checkbox v-model="chengnuo">我承诺上述问题反馈属实，如有虚报，愿承担相应责任。</el-checkbox>
</div> -->
<div class="chengnuo" style="text-align: center;">
  <input type="submit" class="tijiao-an" @click="submit"></input>
</div>

<!-- 
<el-dialog title="提示" class="dialog" center :show-close="false" :close-on-click-modal="false"
  :close-on-press-escape="false" :visible.sync="dialogVisible" width="90%">
  <p>1. 为严格落实新冠肺炎疫情防控“九不准”要求，认真贯彻落实国务院联防联控机制《关于进一步优化新冠肺炎疫情防控措施科学精准做好防控工作的通知》（以下简称“二十条”）精神， 防止和纠正工作中出现的简单化、一刀切、层层加码等问题，三河市开设公众留言板，收集相关问题线索。如果您遇到违反“九不准”的情况，请在这里留言。
  </p>
  <p>2. 如您遇有紧急求助事项，为保障您反映的事项能得到及时妥善处理，请就近向地方政府及其相关职能部门反映，或拨打有关热线电话。</p>
  <p>3. 为了使问题能够得到及时有效处理，请您如实反映有关情况，并对其真实性负责。</p>
  <p>4. 留言时请严格遵守《中华人民共和国宪法》等法律法规。  </p>
  <p>5. 我们将对大家反映的问题线索进行汇总整理，并及时转有关地方和部门核实处理，督促整改。</p>
  <p>※注：注册用户每天可提交一次留言信息</p>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">已阅读并同意</el-button>
  </span>
</el-dialog> -->
<script src="https://cdn.bootcdn.net/ajax/libs/bignumber.js/9.1.1/bignumber.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        form: {
          day: 0
        },
        items: {
          nj: [],
          sj: [],
          cj: [],
          cjj: [],
          hj: [],
          yerj: [],
          tj: [],
          bj: [],
          sangj: [],
          fei: [],
        },
        remark: '',
        id: null,
        project: '',
        clocking: []
      }
    },
    created(opt) {
    },
    mounted(opt) {
      if(window.location.search){
        const str = window.location.search.split('?id=')[1]
        const arr = str.split('&p=')
        this.id = arr[0]
        this.project = arr[1]
      }
      this.form.day = this.day = '{{day}}'
      let obj = '{{clocking | dump }}'
      if(obj){
        obj = obj.replaceAll('&quot;','')
        // var jsonStr = eval("("+obj +")");
        // console.log(jsonStr)
        obj = JSON.stringify(obj); 
        console.log(obj)
        console.log(JSON.parse(obj), 7777)
        let arr = obj.split(';')
        if(arr.length > 1){
          for (const item of arr) {
            for (const itemFormKey in this.form) {
              if(itemFormKey === item.split('=')[0]){
                // this.clocking[itemFormKey] = decodeURI(item.split('=')[1])
              }
            }
          }
        }
      }
    },
    watch: {
      items: {
        handler(newVal, oldVal) {
          let nums = new BigNumber(0)
          for (const key in newVal) {
            if(newVal[key].length && key !== 'tj' && key !== 'fei'){
              for (const item of newVal[key]) {
                if(item.t || item.t === 0){
                  const t = new BigNumber(item.t).div(8)
                  nums = nums.plus(t)
                }
              }
            }
          }
          this.form.day = new BigNumber(this.day).minus(nums).toString()
        },
        deep:true
      },
    },
    methods: {
      addItem(str) {
        this.items[str].push({
          d: null,
          t: '',
          r: ''
        })
      },
      delItem(str, index) {
        this.items[str].splice(index, 1)
      },
      selectXz(e){
        this.form.region_2 = e
      },
      beforeAvatarUpload(){},
      handleAvatarSuccess(e){
        this.form[e.data.name] = e.data.url
      },
      submit(){
        if(this.checkPhone() && this.id){
          for (const key in this.items) {
            for (const item of this.items[key]) {
              if(!item.d || !item.t){
                this.$message({
                  type: 'warning',
                  message: `请完善请假信息`
                });
                return
              }
            }
          }
          this.items.staff_id = this.id
          this.items.project = this.project
          this.$http.post('/index/clocking/submit', Object.assign(this.items, {remark: this.remark})).then((res) => {
            if(res.body.errno === 0){
              this.$alert('提交成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  location.reload()
                }
              });
            }else{
              this.$message({
                type: 'warning',
                message: res.body.errmsg
              });
            }
          }, ()=> {

          });
        }
      },
      sendSms(){
        const elId = document.getElementById('codeBtn')
				if(elId.innerHTML!== '发送' && elId.innerHTML!== '<!----><!----><span>发送</span>'){
					return
				}
				if(this.checkPhone()){
          this.$http.get('/index/index/sendSms?phone=' + this.form.phone).then((res) => {
            if(res.body.errno === 0){
							let codeText = 60
							this.timer = setInterval(()=>{
								codeText --
                elId.innerHTML = codeText + 'S'
								if(codeText <= 0){
									clearInterval(this.timer)
									elId.innerHTML = '发送'
								}
							}, 1000)
						}
          }, function () {

          });
				}
			},
			checkPhone(){
				// if(!this.form.moblie){
        //   this.$message({
        //     type: 'warning',
        //     message: `请填写手机号`
        //   });
				// 	return false
				// }
				// var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				// if(!strTemp.test(this.form.phone)){
        //   this.$message({
        //     type: 'warning',
        //     message: `手机号不符合规则`
        //   });
				// 	return false
				// }
				return true
			},
      checkCode(){
				if(!this.form.idcard){
          this.$message({
            type: 'warning',
            message: `请填写身份证号码`
          });
          return false
        }
				if(this.form.idcard.length !== 18){
          this.$message({
            type: 'warning',
            message: `身份证号码不符合规则`
          });
					return false
				}
				return true
			},
    }
  })
  // $(document).ready(function(){
  //   $("input").focus(function(){
  //     $(this).addClass("focus");
  //   });
  //   $("input").blur(function(){
  //     $(this).removeClass("focus");
  //   });
  // })
</script>

{% endblock %}